<template>
  <div id='BacResistantPhenotypeDictForm'>
    <!-- tab基本信息表单  -->
    <el-scrollbar style='height: 100%'>
      <el-form ref='formRef' :model='formData' label-width='90px' class='form-input-m' inline-message>
        <el-row :gutter='20'>
          <el-col :span='12'>
            <el-form-item label='编码' prop='code'>
              <el-input v-model='formData.code' placeholder='请输入编码' clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span='12'>
            <el-form-item label='名称' prop='name'>
              <el-input v-model='formData.name' placeholder='请输入名称' clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter='20'>
          <el-col :span='12'>
            <el-form-item label='标准名' prop='standardName'>
              <el-input v-model='formData.standardName' placeholder='请输入标准名' clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :span='12'>
            <el-form-item label='输入码' prop='inputCode'>
              <el-input v-model='formData.inputCode' placeholder='请输入输入码' clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter='20'>
          <el-col :span='12'>
            <el-form-item label='是否静态' prop='isStatic'>
              <el-switch v-model='formData.isStatic' inline-prompt active-text='是' inactive-text='否' :active-value='1' :inactive-value='0'></el-switch>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="耐药类型" prop="resistantTypeNo">
              <VxePulldownSelectionWithNa :url="'/lis/bac/base/resistant-type/dict/list'" @confirmClick="dropPullDownConfirm" :tableColumn="[
              { field: 'code', title: '编码' },
              { field: 'name', title: '名称', } 
              ]" :aimKeys="[
               { aimKey: 'resistantTypeNa', rowKey: 'name' },
               { aimKey: 'resistantTypeNo', rowKey: 'code' }
              ]" :displayTexts="['name']" :dataObj="{ code: 'resistantTypeNo' }" :displayTextObj="formData.resistantTypeNa ? formData.resistantTypeNa : formData.resistantTypeNo" />
            </el-form-item>
          </el-col>

          <!-- <el-col :span='12'>
            <el-form-item label='样本类型' prop='resistantTypeId'>
              <SelectDataList ref='employeeSelectRef' :url="'/lis/bac/base/resistant-type/dict/list'" :displayField="[
                { title: '编号', props: 'code', width: '100' }, //列标题
                { title: '耐药类型', props: 'name', width: '100' },
                { title: '主键', props: 'id' }
              ]" :placeholder="'点击选择样本类型'" :searchParam="{
                code: 'spectype'
              }" @selectDataRow='SelectRowClick' v-model='formData.resistantTypeName' />
            </el-form-item>
          </el-col> -->
        </el-row>

        <el-row :gutter='20'>
          <el-col :span='12'>
            <el-form-item label='显示顺序' prop='displayOrder'>
              <el-input v-model='formData.displayOrder' type='text' placeholder='请输入显示顺序' clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter='20'>
          <el-col :span='24'>
            <el-form-item>
              <!-- <el-button type="text" class="button-blue" @click="openEditExtraProperties"
                >配置扩展属性</el-button
              > -->
              <el-button type='primary' @click='saveForm'>保存</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 配置扩展属性弹框 -->
      <EditExtraProperties ref='EditExtraPropertiesRef' />
    </el-scrollbar>

  </div>

</template>


<script lang='ts' setup>
// 引入组件区==========
import { getCurrentInstance, onMounted, reactive, ref } from 'vue';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import EditExtraProperties from '@/components/EditExtraProperties.vue'; //配置扩展属性弹框组件
import VxePulldownSelectionWithNa from '@/components/VxePulldownSelectionWithNa.vue';

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();
let typeOptions = reactive([]); //耐药类型
// 基本信息form表单
let formData = reactive({
  id: '',
  code: '' /*编码*/,
  name: '' /*名称*/,
  standardName: '' /*标准名称*/,
  inputCode: '' /*输入码*/,
  isStatic: 0 /*是否静态*/,
  displayOrder: '',
  resistantTypeNo: '' /*显示顺序*/,
  resistantTypeNa: '' /*显示顺序*/
});

let formRef = ref(null); //form表单标记ref

let showLoading = ref(false); //保存按钮
// 方法定义区 =============
defineExpose({ initPage, clearFormData, initAddPage, addNew });
let repSeq = 0;

function initAddPage(addSeq: number) {
  repSeq = addSeq;
}

let visibleOutReporter: any = ref(false);

function addNew() {
  clearFormData(); // 清空表单
}

// 左侧表格点击当前行传过来的数据
function initPage(row: any) {
  if (row !== null) {
    for (let prop in row) {
      formData[prop] = row[prop];
    }
  }
}

onMounted(() => {});

//清空数据
function clearFormData() {
  for (let key in formData) {
    formData[key] = '';
  }
  const el: any = proxy.$refs['formRef'];
  el.resetFields(); //重置该表单项，将其值重置为初始值，并移除校验结果
}

// 新增按钮 + 重置按钮
function handleAdd() {
  clearFormData();
}

//**判断为空*/
function IsEmpty(value: any) {
  if (value === undefined || value === '' || value === null) {
    return true;
  }
  if (JSON.stringify(value) === '{}') {
    return true;
  }
  return false;
}

// 保存按钮
function saveForm() {
  let url = '';
  // 判断添加和编辑接口
  let isAdd = true;
  if (IsEmpty(formData.id)) {
    url = '/lis/bac/base/resistant-phenotype/dict/add';
  } else {
    isAdd = false;
    url = '/lis/bac/base/resistant-phenotype/dict/update';
  }
  if (IsEmpty(formData.resistantTypeNo)) {
    formData.resistantTypeNo = '';
  }
  proxy.$http
    .post(url, formData)
    .then((res: any) => {
      if (res.status.code === 1) {
        if (isAdd) {
          VxeMessage('新增耐药表型成功', VxeNotifyType.success);
        } else {
          VxeMessage('修改耐药表型成功', VxeNotifyType.success);
        }
        proxy.$emit('getTableData'); //触发父组件重新获取表格数据
      } else {
        if (isAdd) {
          VxeMessage('新增耐药表型失败', VxeNotifyType.error);
        } else {
          VxeMessage('修改耐药表型失败', VxeNotifyType.error);
        }
        proxy.$emit('getTableData'); //触发父组件重新获取表格数据
        return;
      }
    })
    .catch((err: any) => {
      VxeMessage('新增耐药表型异常', VxeNotifyType.error);
    });
  showLoading.value = false;
  clearFormData(); //清空数据
}

/**下拉选中 */
function dropPullDownConfirm(e) {
  e.aimKeys.forEach((m) => {
    formData[m.aimKey] = e.row[m.rowKey];
  });
}
</script>

<style lang='scss' scoped>
#BacResistantPhenotypeDictForm {
  padding: 15px;
  height: calc(100% - 30px);
  width: calc(100% - 30px);

  .el-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
</style>

